import { inject, onBeforeMount, onMounted, Ref, ref } from 'vue';
import { computed, defineComponent, SetupContext } from 'vue';
import { MemoryVoiceCourseManagementProps, memoryVoiceCourseManagementProps } from './course-management.props';
import FDynamicFormGroup from '../../../../dynamic-form/src/component/dynamic-form-group/dynamic-form-group.component';
import './course-management.scss';
import { userInfo } from '../../composition/use-data';
import { ResourceCategory, ResourceCourse, ResourceInfo, ShareType } from '../../composition/types';

export default defineComponent({
    name: 'FMemoryVoiceCourseManage',
    props: memoryVoiceCourseManagementProps,
    emits: [] as (string[] & ThisType<void>) | undefined,
    setup(props: MemoryVoiceCourseManagementProps, context: SetupContext) {
        const NotifyService: any = inject('NotifyService');
        const curShareType = inject<ShareType>('curShareInfo');
        // 分类列表
        const categoryList = userInfo?.value?.categories || [];

        // 当前选中的分类
        const currentCategory: Ref<ResourceCategory | null> = ref(null);

        // 选中分类下的科目
        const courseList = computed(() => {
            return () => {
                return currentCategory?.value?.courseList || [];

                // if (currentCategory && currentCategory.value) {
                //     return currentCategory.value.courseList;
                // }
                // if (categoryList && categoryList.length) {
                //     return categoryList[0].courseList;
                // }
                // return [];
            };
        });
        // const latestCourseList=

        onBeforeMount(() => {
            if (categoryList && categoryList.length) {
                currentCategory.value = categoryList[0];

                // courseList.value.push({

                // });
            }
        });

        // form-group编辑器信息
        const nameEditor = { type: 'text' };
        const overviewEditor = { type: 'text' };

        // 初始资源信息
        const initialResource: ResourceInfo = {
            title: '',
            content: '',
            id: Math.random().toString(36).substring(7),
            course: '',
            overview: ''
        };
        const resourceInfo = ref(initialResource);

        function onResourceContentChange(event) {
            resourceInfo.value.content = event.target.value;
        }
        function onCourseOverviewChange(event, course) {
            course.overview = event.target.value;
        }

        function listenResource(tresource,tcurCourse) {
            // TODO：这里提供资料播放功能，播放的内容为content
            if(curShareType){
                curShareType.curResource=tresource;
                curShareType.curResourceCourse=tcurCourse;
            }
        }
        /**
         * 切换分类
         */
        function onCategoryTabChanged(newValue: any) {
            currentCategory.value = categoryList.find((c) => c.id === newValue?.nextId) || null;
        }

        function renderCoursePanel(course: ResourceCourse) {
            return (
                <div class="course">
                    <div class="basic-panel">
                        <f-avatar v-model={course.cover} shape="square"></f-avatar>
                        <div class="right">
                            <div class="f-form-layout farris-form farris-form-controls-inline position-relative">
                                <FDynamicFormGroup
                                    customClass="col-12 mb-2"
                                    editor={nameEditor}
                                    label="科目名称"
                                    required={true}
                                    id="course-name"
                                    v-model={course.title}></FDynamicFormGroup>
                                <div class="col-12 mb-2">
                                    <div class="farris-group-wrap">
                                        <div class="form-group farris-form-group">
                                            <label class="col-form-label col-form-label-multi">
                                                <span class="farris-label-info text-danger">*</span>
                                                <span class="farris-label-text"> 科目简述 </span>
                                            </label>
                                            <div class="farris-input-wrap">
                                                <textarea
                                                    class="form-control"
                                                    id="course-overview"
                                                    maxlength="2000"
                                                    style="height:50px"
                                                    value={course.overview}
                                                    // onInput={onCourseOverviewChange( course)}
                                                    placeholder="请输入科目简要说明 "></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="resource-list">
                        {course.resourceList?.map((resource) => {
                            return (
                                <div class="resource border">
                                    <div class="title">
                                        <span>{resource.title}</span>
                                    </div>
                                    <div class="content">
                                        <span>简述： {resource.overview}</span>
                                    </div>
                                    <div class="content">
                                        <span> 内容：{resource.content}</span>
                                    </div>
                                    <div class="btn-panel">
                                        <span class="mr-3"  onClick={(ev: MouseEvent) => listenResource(resource,course)}>
                                            <span class="f-icon f-icon-volume-up"></span>播放
                                        </span>
                                        <span class="mr-3">
                                            <span class="f-icon f-icon-delete"></span>删除
                                        </span>
                                        <span class="mr-3">
                                            <span class="f-icon f-icon-edit-button"></span>编辑
                                        </span>
                                        <span class="mr-3 state">
                                            <img src="assets/memory-voice/course-state2.png"></img>标记状态
                                        </span>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            );
        }
        return () => {
            return (
                <div class="mv-course-manage">
                    <f-tabs onTabChange={onCategoryTabChanged}>
                        {categoryList?.map((category: ResourceCategory) => {
                            return <f-tab-page id={category.id} title={category.title}></f-tab-page>;
                        })}
                    </f-tabs>
                    <div class="course-list">
                        {currentCategory.value?.courseList.map((course) => {
                            return renderCoursePanel(course);
                        })}
                    </div>
                </div>
            );
        };
    }
});
